<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>go home 回家助手</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'self'">
        <link rel="stylesheet" href="css/jquery-ui.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-icons.min.css">
    </head>
  <body>
    <div class="header-group">
        <span>当前用户：</span><span id="userName"></span>
        <a href="https://www.12306.cn" target="_blank" id="loginUser"> 去登录12306 </a>
<!--        <a href="#" data-bs-toggle="modal" data-bs-target="#login-frame" id="loginUser">登录12306 </a>-->

        <div class="my-tips-warning"><span>提示：</span>
            开始抢票时请保持页面打开,不要切换窗口。
        </div>
    </div>

    <div class="container">
        <ul class="nav nav-tabs" id="myTabs">
            <li class="nav-item">
                <a class="nav-link active" id="tab1-tab" data-bs-toggle="tab" href="#tab1">抢票</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="tab2-tab" data-bs-toggle="tab" href="#tab2">高级查询</a>
            </li>

        </ul>

        <div class="tab-content mt-2">
            <div class="tab-pane fade show active" id="tab1">
                <div class="row">

                <form class="col-md-8 was-validation" action="#">

                    <div class="input-group mb-1" style="max-width: 800px;">
                        <span class="input-group-text">日期：</span>
                        <input type="text" class="form-control" id="date" placeholder="选择日期.." autocomplete="off" />
                        <span class="input-group-text">上车城市：</span>
                        <input type="text" id="getOnStation" class="form-control" placeholder="输入上车城市" value="深圳"/>
                        <span class="input-group-text">下车城市：</span>
                        <input type="text" class="form-control" id="toStation" placeholder="输入下车城市" value="合肥"/>
                        <button id="search" class="btn btn-success btn-sm" style="width: 80px">  查询  </button>
                        <button id="searchSwap" class="btn btn-success btn-sm"
                                style="margin-left: 10px;width: 40px;height: 40px; border-radius: 50%">
                            <i class="bi bi-shuffle"></i> </button>
                    </div>
                    <div class="input-group row align-items-start">
                        <div class="col-2">
                            <select class="form-select" id="timeInterval" >
                                <option selected value="">选择时间段</option>
                            </select>

                        </div>
                        <div id="trainCheckContainer" class="input-group col">
<!--                      class=train-checkbox          -->
                        </div>
                    </div>
                    <div class="input-group mb-1" style="margin-top: 10px">
                        <button type="submit" id="startTask" class="btn btn-success btn-sm" style="width: 80px"
                                data-bs-toggle="modal" data-bs-target="#exampleModal">  开始抢票  </button>
                        <button id="stopTask" class="btn btn-danger btn-sm" style="width: 80px">  停止抢票</button>
                        <button data-bs-toggle="collapse" data-bs-target="#ticketLogContent" class="btn btn-sm"
                                style="width: 80px"> 隐藏日志</button>
                    </div>
                </form>
                <div class="col-md-4" style="margin-left: 5px; max-width: 400px; display: flex" >

                   <div class="row scrollable-list" ><span>查询记录：</span>
                    <div class='col' id="searchHistoryList" > </div>
                   </div>
                    </div>
                </div>

                <div class="input-group">
                    <select class="form-select" aria-label="Default select example" id="trainNoSelect" style="max-width: 250px">
                        <option selected startTime="" value="">选择列车</option>
                    </select>
                </div>
                <div class="input-group ">
                    <span class="">选择座位：</span>
                    <div class="form-check ml-2" style="margin-left: 10px">
                        <input class="form-check-input seat-checkbox" type="checkbox" value="O" id="seat-checkbox1"  >
                        <label class="form-check-label" for="seat-checkbox1">
                            二等座
                        </label>
                    </div>

                    <div class="form-check" style="margin-left: 10px">
                        <input class="form-check-input seat-checkbox" type="checkbox" value="4" id="seat-checkbox2">
                        <label class="form-check-label  " for="seat-checkbox2">
                            软卧
                        </label>
                    </div>

                    <div class="form-check  " style="margin-left: 10px">
                        <input class="form-check-input seat-checkbox" type="checkbox" value="3" id="seat-checkbox3">
                        <label class="form-check-label" for="seat-checkbox3">
                            硬卧
                        </label>
                    </div>
                    <div class="form-check  " style="margin-left: 10px">
                        <input class="form-check-input seat-checkbox" type="checkbox" value="1" id="seat-checkbox4">
                        <label class="form-check-label" for="seat-checkbox4">
                            硬座
                        </label>
                    </div>
                    <div class="form-check  " style="margin-left: 10px">
                        <input class="form-check-input seat-checkbox" type="checkbox" value="M" id="seat-checkbox5">
                        <label class="form-check-label  " for="seat-checkbox5">
                            一等座
                        </label>
                    </div>
                </div>

                <div class="input-group mb-1">
                    <span class="" >乘车人：</span>
                    <div id="passengers"></div>
                </div>
                <div class="input-group mb-1">
                    <span class="input-group-text" >发送短信（可选项）：</span>
                    <input type="text" class="form-control" id="loginName" disabled style="max-width: 250px"/>
                    <input type="text" class="form-control" id="lastCode" placeholder="身份证号最后4位" style="max-width: 200px"/>
                    <span class="input-group-text" style="color: red">抢票成功后发送一条登录的短信提示，然后到12306 app 支付。</span>
                </div>

            <div class="collapse show">

                <div class="container mb-1" id='ticketLogContent' style="display: none;">
                    <label for="ticketLogTextarea">实时抢票信息：
                    <label  class="label label-danger" style="color: red">* 不要关闭或刷新页面 *</label></label>
                    <textarea class="form-control" id="ticketLogTextarea" rows="10" disabled ></textarea>
                </div>
            </div>

            <div>
                <div>
                    <div class="flex-container">
                        <table id="ticketList" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>车次</th>
                                <th>上车站</th>
                                <th>下车站</th>
                                <th>上车时间</th>
                                <th>下车时间</th>
                                <th>历时</th>
                                <th>二等座</th>
                                <th>硬卧</th>
                                <th>软卧</th>
                                <th>硬座</th>
                                <th>无座</th>
                                <th>一等座</th>
                                <th>开售</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- Table body will be dynamically populated here -->
                            </tbody>
                        </table>
                    </div>
                </div>

<!--                <table id="trainStationTable" class="table table-striped table-bordered">-->
<!--                    <thead>-->
<!--                    <tr>-->
<!--                        <th>序号</th>-->
<!--                        <th>车站</th>-->
<!--                        <th>出发时间</th>-->
<!--                        <th>停留时间</th>-->
<!--                    </tr>-->
<!--                    </thead>-->
<!--                    <tbody>-->
<!--                    &lt;!&ndash; Table body will be dynamically populated here &ndash;&gt;-->
<!--                    </tbody>-->
<!--                </table>-->
            </div>
            </div>
            <div class="tab-pane fade" id="tab2">
                <div class="stationIndo">
                    <div class="input-group mb-3">
                        <span class="input-group-text">车次</span>
                        <input type="text" id="trainNoAll" class="form-control" placeholder="车次 G1602" value=""/>
                        <button id="searchAll" class="btn btn-success btn-sm" style="width: 80px">  查询  </button>
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text">上车城市：</span>
                        <input type="text" id="getOnStationAll" class="form-control" placeholder="输入上车城市" value=""/>
                        <span class="input-group-text">下车城市：</span>
                        <input type="text" class="form-control" id="toStationAll" placeholder="输入下车城市" value=""/>
                    </div>
                </div>

                <div >
                    <div  class="flex-container">
                        <table id="ticketListAllTable" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>日期</th>
                                <th>车次</th>
                                <th>上车站</th>
                                <th>下车站</th>
                                <th>上车时间</th>
                                <th>下车时间</th>
                                <th>历时</th>
                                <th>二等座</th>
                                <th>硬卧</th>
                                <th>软卧</th>
                                <th>硬座</th>
                                <th>无座</th>
                                <th>一等座</th>
                                <th>是否有票</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- Table body will be dynamically populated here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
<!--    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#trainStationModal">-->
<!--        Launch demo modal-->
<!--    </button>-->
    <div class="modal" tabindex="-1" id="trainStationModal">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><span class="trainTitle"></span>经过站点</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table id="trainStationTable" class="table table-sm table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>车站</th>
                            <th>出发时间</th>
                            <th>停留时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- Table body will be dynamically populated here -->
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" id="queryAllByDate">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width: 1200px">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><span class="trainTitle"></span>各日期票量</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <table class="table table-sm table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>日期</th>
                            <th>车次</th>
                            <th>上车站</th>
                            <th>下车站</th>
                            <th>上车时间</th>
                            <th>下车时间</th>
                            <th>历时</th>
                            <th>二等座</th>
                            <th>硬卧</th>
                            <th>软卧</th>
                            <th>硬座</th>
                            <th>无座</th>
                            <th>一等座</th>
                            <th>是否有票</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- Table body will be dynamically populated here -->
                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" id="queryAllByPrice">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width: 1200px">
            <div class="modal-content ">
                <div class="modal-header">
                    <h5 class="modal-title"><span class="trainTitle" style="color: red; font-weight: bold;"></span> 各车段票价</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body row">
                    <div class="col-2 trainStation" >
                        <p>途经站点</p>
                        <ul class="list-group">

                        </ul>
                    </div>
                    <div class="col">
                    <table class="table table-sm table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>上车站</th>
                            <th>途经车站</th>
                            <th>二等座</th>
                            <th>硬卧</th>
                            <th>软卧</th>
                            <th>硬座</th>
                            <th>无座</th>
                            <th>一等座</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- Table body will be dynamically populated here -->
                        </tbody>
                    </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" tabindex="-1"  id='login-frame'>
    <div class="modal-dialog login-frame modal-dialog-centered modal-xl">
        <div class="modal-content login-frame" >
            <div class="modal-header">
                <h5 class="modal-title"><span class="trainTitle" style="color: red; font-weight: bold;"></span> 登录完成后手动刷新浏览器</h5>

            </div>
            <div>
<!--            <iframe src="https://kyfw.12306.cn/otn/resources/login.html" class="login-frame"></iframe>-->
            </div>
        </div>
    </div>
    </div>

    <script src="libs/jquery-3.7.1.js" ></script>
    <script src="libs/jquery-ui.js" ></script>
    <script src="./libs/popper.min.js"></script>
    <script src="./libs/bootstrap.min.js"></script>
    <script src="./js/station_names.js"></script>
    <script src="./js/12306.js"></script>
    <script src="./js/chromeApi.js"></script>
  </body>

<style>
    .header-group {
        display: flex;
    }
    .my-tips-warning {
        margin-left: 50px;
        color: red;
        font-size: 18px;
        font-weight: bold;
    }
    /* 自定义滚动条样式 */
    .scrollable-list {
        max-height: 150px; /* 设置最大高度 */
        overflow-y: auto; /* 在超出容器高度时显示垂直滚动条 */
    }

    #searchHistoryList {
        display: flex;
        flex-wrap: wrap; /* 允许内容自动换行 */
        justify-content: flex-start; /* 水平方向左对齐 */
        gap: 10px; /* 设置项目之间的间距 */
    }

    .history-item {
        /*width: 100px; !* 设置项目的宽度 *!*/
        /*height: 50px; !* 设置项目的高度 *!*/
        /*background-color: #ccc;*/
        margin: 0 10px 0 10px;
    }
    .login-frame{
        width: 1500px;
        height: 800px;
    }
    .modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
</html>
